<template>
    <div>
        <!--头部登录导航条-->
        <Header></Header>

        <!--首页顶部轮播广告-->
        <div style=" width:1200px; margin:0px auto; margin-top:20px;">
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="(item, index) in adList" :key="index">
                    <a :href="item.link">
                        <img :src="item.img" style="width:100%;height:100%;object-fit:cover"/>
                    </a>
                </el-carousel-item>
            </el-carousel>
        </div>

        <!--容器-->
        <div style="width: 1200PX; min-height:500px; margin:0px auto;">

            <!--课程列表-->
            <div style="width: 850PX;display: inline-block;  ">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="选课" name="allLesson">
                        <ul class="course-ul-pc">
                            <!-- 课程信息展示开始 -->
                            <li class="course-li" v-for="(item,index) in courseList" :key="index">
                                <!-- 课程封面图 -->
                                <img
                                        :src="item.courseImgUrl"
                                        class="teacher-portrait hover-pointer"
                                />
                                <!-- 课程文字信息 -->
                                <div class="content-main">
                                    <!-- 课程标题 -->
                                    <div class="content-title hover-pointer">
                                        <div
                                                class="p-title"
                                                style="text-align:left;"
                                                @click="gotoDetail(item)"
                                        >
                      <span>
                        {{item.courseName}}
                      </span>
                                        </div>

                                        <!-- 作者和职称 -->
                                        <p class="p-title-buy text-overflow">
                      <span class="p-author-span">
                        {{item.teacher.teacherName}}
                      </span>
                                            <span class="p-author-line"/>
                                            <span class="p-author-span">
                        {{item.teacher.position}}
                      </span>
                                        </p>

                                        <p></p>
                                        <!-- 课程简单描述 -->
                                        <p class="p-describe" style="text-align:left;">
                                            {{item.brief}}
                                        </p>
                                    </div>

                                    <!-- 课程前两个章节信息 -->
                                    <ul class="content-course" style="text-align:left;">
                                        <!-- 章节1 : 免费试看，通常是第一章的前两节课 -->
                                        <li
                                                class="content-course-lesson text-overflow"
                                                style="width:300px"
                                                v-for="(lesson,index) in item.lessonList" :key="index">
                                            <!-- 免费试看图标 -->
                                            <img
                                                    src="@/assets/course-list/free-course.png"
                                                    class="free-label hover-pointer"
                                            />
                                            <span class="theme-span hover-pointer">
                        {{lesson.theme}}
                      </span>


                                        </li>

                                    </ul>
                                    <!-- 价格信息 -->
                                    <div class="content-price" style="text-align:left;">
                                        <p class="content-price-p">
                                            <span class="content-price-orange-sm">￥</span>
                                            <span class="content-price-orange">{{item.discounts}}</span>
                                            <span class="current-price">
                        <span class="current-price-unite">￥</span>
                        {{item.price}}
                      </span>
                                            <span class="activity-name">成就自己</span>
                                            <span class="content-price-buy">{{item.sales}}人购买</span>
                                        </p>
                                        <div class="btn btn-green btn-offset" @click="buy(item)">立即购买</div>
                                    </div>
                                </div>
                            </li>
                            <!-- 课程信息结束 -->
                        </ul>

                        <!-- 微信支付二维码
                        <el-dialog :visible.sync="dialogFormVisible" :before-close="cancelOrder" :modal="true" :close-on-click-modal="false" style="width:800px;margin:0px auto;" >
                          <h1 style="font-size:30px;color:#00B38A" >微信扫一扫支付</h1>
                          <div id="qrcode" style="width:210px;margin:20px auto;"></div>
                          <h2 id="statusText"></h2>
                          <p id="closeText"></p>
                        </el-dialog>
                        -->

                    </el-tab-pane>
                    <el-tab-pane label="已购" name="hasPay">
                        <div v-if="!isLogin">
                            <img src="@/assets/course-list/no-login@2x.png" class="no-data-icon"/>
                            <div class="no-data-title">您还没有登录</div>
                            <div class="no-data-title">登录后即可查看已购课程</div>
                            <div class="btn btn-yellow btn-center">立即登录</div>
                        </div>
                        <div v-if="isLogin">
                            <ul class="course-ul-pc">
                                <!-- 课程信息展示开始 -->
                                <li class="course-li" v-for="(item , index) in myCourseList" :key="index">
                                    <!-- 课程封面图 -->
                                    <img
                                            :src="item.courseImgUrl"
                                            class="teacher-portrait hover-pointer"
                                    />
                                    <!-- 课程文字信息 -->
                                    <div class="content-main">
                                        <!-- 课程标题 -->
                                        <div class="content-title hover-pointer">
                                            <div
                                                    class="p-title"
                                                    style="text-align:left;"
                                                    @click="gotoDetail(item)"
                                            >
                                              <span>
                                                {{item.courseName}}
                                              </span>
                                            </div>
                                            <!-- 作者和职称 -->
                                            <p class="p-title-buy text-overflow">
                                              <span class="p-author-span">
                                                {{item.teacher.teacherName}}
                                              </span>
                                                <span class="p-author-line"/>
                                                <span class="p-author-span">
                                                {{item.teacher.position}}
                                              </span>
                                            </p>
                                            <p></p>
                                            <!-- 课程简单描述 -->
                                            <p class="p-describe" style="text-align:left;">
                                                {{item.brief}}
                                            </p>
                                        </div>
                                        <!-- 课程前两个章节信息 -->
                                        <ul class="content-course" style="text-align:left;">
                                            <!-- 章节1 : 免费试看，通常是第一章的前两节课 -->
                                            <li
                                                    class="content-course-lesson text-overflow"
                                                    style="width:300px"
                                                    v-for="(lesson , index) in item.lessonsDTO2" :key="index">
                                                <!-- 免费试看图标 -->
                                                <img
                                                        src="@/assets/course-list/free-course.png"
                                                        class="free-label hover-pointer"
                                                />
                                                <span class="theme-span hover-pointer">
                                                {{lesson.theme}}
                                                </span>
                                            </li>

                                        </ul>
                                        <!-- 价格信息 -->
                                        <div class="content-price" style="text-align:left;">
                                            <p class="content-price-p">
                                                <span class="content-price-orange-sm">￥</span>
                                                <span class="content-price-orange">{{item.discounts}}</span>
                                                <span class="current-price">
                                                <span class="current-price-unite">￥</span>
                                                {{item.price}}
                                                </span>
                                                <span class="activity-name">成就自己</span>
                                                <span class="content-price-buy">{{item.sales}}人购买</span>
                                            </p>
                                            <div class="btn btn-yellow btn-offset">好好学习</div>
                                        </div>
                                    </div>
                                </li>
                                <!-- 课程信息结束 -->

                            </ul>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <!--微信连接-->
            <!--      <div style="width:330px; height:350px; display: inline-block; float:right;" >-->
            <!--        <p  class="title">精选文章</p> -->
            <!--        <ul class="article-content">-->
            <!--          <li>即将淘汰的java技术，曾经都是王者</li>-->
            <!--        </ul>-->
            <!--        <p  class="split-line"  style="margin-bottom:20px;"   >-->
            <!--          <span  class="split-word">还可以在这里找到我们</span>-->
            <!--        </p> -->
            <!--        <ul  class="social-list" >-->
            <!--          <li  class="social-item"  >-->
            <!--            <div id="qr-wrapper"  class="qr-wrapper" style="display: none;" @mouseout="hideqr()">-->
            <!--              <img  src="../assets/wechat-qr.47ac3f5.png" alt="二维码" class="qr-wrapper-img">-->
            <!--            </div> -->
            <!--            <img @mouseover="showqr()"  src="" alt="微信" class="social-item-img"> -->
            <!--            <p  class="social-name">微信</p>-->
            <!--          </li>-->
            <!--          <li  class="social-item hover-pointer" @click="gozhihu()" >-->
            <!--              <img  src="" alt="知乎" class="social-item-img"> -->
            <!--              <p  class="social-name">知乎</p>-->
            <!--          </li>-->
            <!--          <li  class="social-item hover-pointer" @click="gowb()">-->
            <!--            <img  src="" alt="微博" class="social-item-img"> -->
            <!--            <p  class="social-name">微博</p>-->
            <!--          </li>-->
            <!--        </ul>-->
            <!--      </div>-->

        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import Header from "./Header/Header"; //顶部登录条
    import Footer from "./Footer/index"; //顶部登录条
    import jwtDecode from 'jwt-decode';
    import qs from 'qs';

    export default {
        name: "Index",
        components: {
            Header,
            Footer,
        },
        data() {
            return {
                activeName: "allLesson",
                courseList: [],  // 课程集合
                myCourseList: [], // 我购买过的课程列表
                isLogin: false, //登录状态
                user: null, // 已登录的用户对象信息
                adList: null, //广告集合
            };
        },
        created() {
            // 加载顶部轮播广告
            this.getAdList();
            // 从url中获取token参数
            let token = this.getValueByUrlParams('token');
            if (token == null || token == "") {
                // 从cookie中获取user的token
                token = this.getCookie("user");
            }
            this.token = token;
            if (token != null || token != "") {
                // 将token发送到sso进行校验
                this.axios
                    .get("http://localhost:9091/user/check", {
                        params: {
                            token: token
                        }
                    })
                    .then((result) => {
                        if (result.data.state == 4) {
                            this.isLogin = true;
                            this.setCookie("user", token, 6000);
                            this.user = jwtDecode(token);
                            // console.log(  this.user );
                            // 获取已购买的课程列表
                            //this.getMyCourseList();
                        }
                    })
                    .catch((error) => {
                    });
            }
            this.getCourseList(); //当组件创建完毕，就调用获取所有课程的方法
        },
        methods: {
            /*gotoVideo(){
            },*/
            changeCourseTab(tabName) {
                this.classSelect = tabName;
                sessionStorage && sessionStorage.setItem("courseTab", tabName);
            },
            gotoDetail(item) {
                this.$router.push({name: "Course", params: {course: item}});
            },
            // 去课程微服务 获取 全部课程
            getCourseList() {
                return this.axios
                    .get("http://localhost:9093/course/getAllCourse")
                    .then((result) => {
                        this.courseList = result.data;
                        console.log(result.data);
                    }).catch((error) => {
                        this.$message.error("获取课程信息失败！");
                    });
            },
            // 获取已购的课程列表
            getMyCourseList() {
                return this.axios
                    .get("http://localhost:8004/course/getCoursesByUserId", {
                        params: {
                            userid: this.user.userid
                        }
                    }).then((result) => {
                        console.log(result);
                        this.myCourseList = result.data;
                    }).catch((error) => {
                        this.$message.error("获取已购买的课程信息失败！");
                    });
            },
            // 加载顶部轮播广告
            getAdList() {
                return this.axios
                    .get("http://localhost:9000/ad/promotionAd/findAdBySpaceId/1")
                    .then((result) => {
                        this.adList = result.data;
                    }).catch((error) => {
                        this.$message.error("获取轮播广告失败！");
                    });
            },
            // 显示微信公众号二维码
            showqr() {
                document.getElementById("qr-wrapper").style.display = "block";
            },
            // 隐藏微信公众号二维码
            hideqr() {
                document.getElementById("qr-wrapper").style.display = "none";
            },
            // 跳转到知乎
            gozhihu() {
                window.open('https://www.zhihu.com/org/la-gou-kai-wu-xun-lian-ying');
            },
            // 跳转到微博
            gowb() {
                window.open('https://weibo.com/p/1006066707072494/home?from=page_100606&mod=TAB&is_hot=1#place');
            },
            //设置cookie
            setCookie(key, value, expires) {
                var exp = new Date();
                exp.setTime(exp.getTime() + expires * 1000);
                document.cookie = key + "=" + escape(value) + ";expires=" + exp.toGMTString();
            },
            //从cookie中获取token
            getCookie(key) {
                var name = key + "=";
                /*if(document.cookie.indexOf(';') > 0) {
                  var ca = document.cookie.split(';');
                  for(var i=0; i<ca.length; i++) {
                      var c = ca[i].trim();
                      if (c.indexOf(name)==0) {
                        return c.substring(name.length,c.length);
                      }
                  }
                }*/
                var c = document.cookie;
                return c.substring(name.length);
            },
            //删除cookie
            delCookie(name) {
                // 删除cookie只需要将值清空即可
                // -1 让指定名为name的cookie过期实现自动清除，如果不赋值-1的话，只是将对应的cookie值删除，而这条cookie记录并没有删除
                this.setCookie(name, '', -1);
            },
            // 获取url中参数
            getValueByUrlParams(paramKey) {
                // http://localhost:8080/#/?token=1&id=2
                var url = location.href;
                var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
                var paraObj = {}
                var i, j
                for (i = 0; j = paraString[i]; i++) {
                    paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
                }
                var returnValue = paraObj[paramKey.toLowerCase()];
                if (typeof (returnValue) == "undefined") {
                    return "";
                } else {
                    return returnValue;
                }
            },
        },

    };
</script>


<style lang="less" scoped>
    @import "../assets/less/common.less";


    .qr-wrapper {
        position: absolute;
        width: 140px;
        height: 140px;
        display: block;
        z-index: 10;
        background: #fff;
        border: 1px solid #e3ebe9;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .08);
        border-radius: 3px;
        box-sizing: border-box;
        left: -30px;
        top: -150px;
    }

    p {
        margin-top: 0;
    }

    li {
        list-style: none;
    }

    .social-item {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 62px;
    }

    .social-item-img {
        width: 32px;
        height: 32px;
    }

    .split-word {
        display: inherit;
        color: #999;
        font-size: 14px;
        margin: 0 10px;
        position: relative;
    }

    .split-word:before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 30px;
        height: 1px;
        background-color: #d8d8d8;
        margin: 10px 0 0 -44px;
    }

    .split-word:after {
        margin: 10px 0 0 13px;
        content: "";
        display: inline-block;
        position: absolute;
        width: 30px;
        height: 1px;
        background-color: #d8d8d8;
    }

    .article-content {
        font-size: 14px;
        margin-bottom: 40px;
    }

    ol, ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .title {
        font-size: 16px;
        color: #333;
        margin-bottom: 20px;
        font-weight: 500;
    }

    flex {
        display: flex;
    }

    .btn(@a, @b) {
        background-color: @a;
        color: @b;
        border: 1px solid @a;
    }

    .course-ads {
        margin-bottom: 20px;
        cursor: pointer;
        width: 100%;
        max-height: 280px;
        overflow: hidden;

        img {
            width: 100%;
            border-radius: 2px;
        }
    }

    .tab-container {
        width: 100%;
        height: 60px;
        background: #ffffff;
        border-bottom: 1px solid #ededed;
    }

    .vux-tab.course-tab {
        box-sizing: border-box;
        height: 60px;
        width: 200px;
        overflow: hidden;
        font-size: 20px;

        .vux-tab-container {
            width: 260px;
        }

        .vux-tab-item {
            cursor: pointer;
            background: none;
            line-height: 60px;
            font-size: 20px;
        }

        .vux-tab-ink-bar {
            bottom: -1px;

            .vux-tab-bar-inner {
                height: 2px;
            }
        }
    }

    .tab-container {
        width: 100%;
        height: 60px;
        background: #ffffff;
        border-bottom: 1px solid #ededed;
    }

    .course-ul {
        padding: 0 20px;
    }

    .hover-pointer {
        cursor: pointer;
    }

    .course-ul-pc .course-li {
        padding: 30px 0 40px 0;
        border-bottom: 1px solid #ededed;
        position: relative;

        &:last-child {
            border-bottom: 0;
        }
    }

    .current-price {
        font-size: 12px;
        color: #999;
        font-weight: 600;
        text-decoration: line-through;
    }

    .current-price-unite {
        font-size: 12px;
        margin-right: -4px;
    }

    .p-author-line {
        content: "";
        display: inline-block;
        width: 1px;
        height: 10px;
        position: absolute;
        background: #999;
        margin-left: 5px;
        top: 3px;
    }

    .teacher-portrait {
        width: 121px;
        height: 159px;
        border-radius: 4px;
        float: left;
    }

    .content-main {
        line-height: 1.4;
        margin-left: 141px;
        position: relative;
        height: 150px;
    }

    .content-main .p-title {
        font-size: 20px;
        color: #333;
        font-family: PingFangSC-Medium, PingFang SC;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 350px;
    }

    .course-ul-pc .content-main .p-title-buy {
        font-size: 12px;
        color: #999;
        display: inline-block;
        margin-top: 6px;
        position: relative;
        float: right;
        top: -28px;
        font-weight: 400;
    }

    p {
        margin-top: 0;
    }

    .course-ul-pc .p-author-line {
        content: "";
        display: inline-block;
        width: 1px;
        height: 10px;
        position: absolute;
        background: #999;
        margin-left: 5px;
        top: 3px;
    }

    .text-overflow {
        word-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .course-ul-pc .content-main .p-describe {
        font-size: 14px;
        margin-top: 5px;
        color: #333;
        word-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .course-ul-pc .content-main .p-author-span:not(:first-child) {
        margin-left: 18px;
    }

    .course-ul-pc .content-main .content-course {
        font-size: 14px;
        padding-top: 25px;
        color: #666;
    }

    ol,
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    * {
        -webkit-tap-highlight-color: transparent;
    }

    .course-ul-pc .content-main .content-course-lesson {
        display: inline-block;
        width: 304px;
        margin: 2px 40px 6px 0;
    }

    .course-ul-pc .content-main .content-course .free-label {
        width: 50px;
        height: 16px;
        margin: 1px 5px 0 0;
    }

    .course-ul-pc .content-main .content-course-lesson:nth-child(2n) {
        margin-right: 0;
    }

    .course-ul-pc .content-main .content-course-lesson {
        display: inline-block;
        width: 304px;
        margin: 2px 40px 6px 0;
    }

    .course-ul-pc .content-main .content-price {
        height: 28px;
        line-height: 28px;
        position: absolute;
        width: 100%;
        bottom: -4px;
    }

    .course-ul-pc .content-main .content-price-p {
        font-size: 0;
    }

    .course-ul-pc .content-main .content-price-orange-sm {
        color: #ff7452;
        font-size: 14px;
    }

    .content-course {
        font-size: 14px;
        padding-top: 25px;
        color: #666;
    }

    .content-course.free-label {
        width: 50px;
        height: 16px;
        margin: 1px 5px 0 0;
    }

    .content-course-lesson {
        display: inline-block;
        width: 304px;
        margin: 2px 40px 6px 0;
    }

    .content-course-lesson:nth-child(2n) {
        margin-right: 0;
    }

    .disabled-word {
        color: #999;
        cursor: default;
    }

    .theme-span :hover {
        color: #0abf89;
    }

    .content-price-p {
        font-size: 0;
    }

    .content-price-orange {
        color: #ff7452;
        font-size: 20px;
    }

    .content-price-buy {
        font-size: 14px;
        color: #999;
        margin-left: 20px;
        transform: translate(8px, -2px);
        display: inline-block;
    }

    .content-price-grey {
        color: #999;
        font-size: 12px;
        margin-left: 5px;
    }

    .content-price-buyed {
        color: #999;
        font-size: 14px;
    }

    .content-price {
        height: 28px;
        line-height: 28px;
        position: absolute;
        width: 100%;
        bottom: -4px;
    }

    .activity-name {
        font-size: 12px;
        line-height: 14px;
        color: rgba(255, 255, 255, 1);
        padding: 2px 4px;
        background: linear-gradient(180deg,
        rgba(255, 137, 110, 1) 0%,
        rgba(255, 123, 92, 1) 100%);
        border-radius: 2px;
        display: inline-block;
        transform: translate(6px, -3px);
    }

    .p-title {
        font-size: 20px;
        color: #333;
        font-family: PingFangSC-Medium, PingFang SC;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 350px;
    }

    .p-title-dec {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .p-title-buy {
        // .font(12px);
        font-size: 12px;
        color: #999;
        display: inline-block;
        margin-top: 6px;
        position: relative;
        // .fr;
        top: -28px;
        font-weight: normal;
    }

    .companion-reading {
        background: rgba(0, 179, 138, 0.06);
        border-radius: 2px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #00b38a;
        display: inline-block;
        padding: 0 8px;
        height: 22px;
        line-height: 22px;
        margin-left: 10px;
        vertical-align: text-bottom;
        position: relative;

        .triangle {
            position: absolute;
            top: 12px;
            left: -3px;
            width: 0;
            height: 0;
            content: "";
            border: 5px solid;
            border-color: transparent transparent white white;
            transform: rotate(45deg);
            box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.08);
        }
    }

    .companion-tip {
        display: none;
        position: absolute;
        font-family: HiraginoSansGB-W3;
        font-size: 14px;
        color: #777777;
        background: #ffffff;
        border: 1px solid #e3ebe9;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
        border-radius: 3px;
        line-height: 29px;
        top: -7px;
        word-break: keep-all;
        left: 80px;
        padding: 0 10px;
        width: 200px;
        z-index: 2;
    }

    .companion-reading:hover .companion-tip {
        display: inline-block;
    }

    .companion-reading:hover .companion-tip {
        display: block;
    }

    .p-describe {
        // .font(14px);
        font-size: 14px;
        margin-top: 5px;
        color: #333;
        // .text-overflow;
    }

    .p-author + p {
        margin-top: 0;
    }

    .p-author {
        margin: 10px 0 5px 0;
        // .font(12px);
        font-size: 12px;
        color: #999;
        position: relative;

        .p-author-line {
            content: "";
            display: inline-block;
            width: 1px;
            height: 10px;
            position: absolute;
            background: #999;
            margin-left: 5px;
            top: 3px;
        }
    }

    .p-author-span:not(:first-child) {
        margin-left: 18px;
    }

    .course-ul-container {
        width: 850px;
        display: inline-block;
        float: left;
    }

    .course-ul {
        padding: 0 20px;
    }

    .course-ul-pc {
        width: 790px;
        background-color: #fff;
        padding: 0 30px;
        // .fl;
    }

    .tag-icon {
        width: 57px;
        height: 18px;
        position: absolute;
        top: 30px;
        left: 0;
    }

    .more-icon {
        width: 10px;
        height: 10px;
        vertical-align: middle;
    }

    .btn {
        width: 94px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        cursor: pointer;
        border-radius: 3px;
        font-size: 14px;
        box-sizing: content-box;

        &-green {
            .btn(#00b38a, #fff);

            &:hover {
                background: #00a57f;
                border-color: #00a57f;
            }
        }

        &-yellow {
            .btn(#fcd766, #fff);

            &:hover {
                background: #f0d071;
                border-color: #f0d071;
            }
        }

        &-white {
            .btn(#fff, #00b38a);
            border: 1px solid #00b38a;

            &:hover {
                color: #fff;
                border-color: #00b38a;
                background-color: #00b38a;
            }
        }

        &-offset {
            position: absolute;
            right: 0;
            top: -4px;
        }
    }

    .btn-center {
        margin: 10px auto;
    }

    .no-data-title {
        font-size: 20px;
        color: #333;
        font-weight: 500;
    }
</style>